<style lang="less">
  @import "../../../styles/table-common.less";
</style>
<template>
  <div class="search">
    <Card>
      <Row v-show="openSearch" @keydown.enter.native="handleSearch">
        <Form ref="searchForm" :model="searchForm" inline :label-width="70">
          <Form-item label="手机号" prop="mobile">
            <Input
                    type="text"
                    v-model="searchForm.mobile"
                    clearable
                    placeholder="请输入手机号"
                    style="width: 200px"
            />
          </Form-item>
          <Form-item label="岗位" prop="jobName">
            <Select v-model="searchForm.jobId" placeholder="请选择" clearable style="width: 200px">
              <Option v-for="(item, i) in jobData" :key="i" :value="item.id">{{item.jobName}}</Option>
            </Select>
          </Form-item>
  <!--        <Form-item label="创建时间">
            <DatePicker
                    v-model="selectDate"
                    type="daterange"
                    format="yyyy-MM-dd"
                    clearable
                    @on-change="selectDateRange"
                    placeholder="选择起始时间"
                    style="width: 200px"
            ></DatePicker>
          </Form-item>-->
          <Form-item style="margin-left:-35px;" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
            <Button @click="handleReset">重置</Button>
         <!--   <a class="drop-down" @click="dropDown">
              {{dropDownContent}}
              <Icon :type="dropDownIcon"></Icon>
            </a>-->
          </Form-item>
        </Form>
      </Row>
    <!--  <Row class="operation">
        <Button @click="add" type="primary" icon="md-add">添加企业员工用户</Button>
        <Button @click="delAll" icon="md-trash">批量删除</Button>
        <Dropdown @on-click="handleDropdown">
          <Button>
            更多操作
            <Icon type="md-arrow-dropdown" />
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem name="refresh">刷新</DropdownItem>
            <DropdownItem name="reset">重置用户密码</DropdownItem>
            <DropdownItem name="exportData">导出所选数据</DropdownItem>
            <DropdownItem name="exportAll">导出全部数据</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Button type="dashed" @click="openSearch=!openSearch">{{openSearch ? "关闭搜索" : "开启搜索"}}</Button>
        <Button type="dashed" @click="openTip=!openTip">{{openTip ? "关闭提示" : "开启提示"}}</Button>
      </Row>-->
      <Row v-show="openTip">
        <Alert show-icon>
          已选择
          <span class="select-count">{{selectCount}}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
                :loading="loading"
                border
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-sort-change="changeSort"
                @on-selection-change="showSelect"
                ref="table"
        ></Table>
        <Table :columns="exportColumns" :data="exportData" ref="exportTable" style="display:none"></Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
        ></Page>
      </Row>
    </Card>

    <Modal v-model="modalExportAll" title="确认导出" :loading="loadingExport" @on-ok="exportAll">
      <p>您确认要导出全部 {{total}} 条数据？</p>
    </Modal>

    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
      <Form ref="form" :model="form" :label-width="100">

        <FormItem label="分数">
          <Input v-model="addOrUpdateSore.score" clearable style="width:100%" />
        </FormItem>
        <FormItem label="加减">
          <Select v-model="addOrUpdateSore.addOrSub" placeholder="请选择">
            <Option :value="0">+</Option>
            <Option :value="1">-</Option>
          </Select>
        </FormItem>
        <FormItem label="描述">
          <Input v-model="addOrUpdateSore.ScoreDesc" clearable style="width:100%" />
        </FormItem>
        <FormItem label="详情" type="textArea">
          <Input v-model="addOrUpdateSore.scoreDetail" clearable style="width:100%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible=false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
      </div>
    </Modal>


    <check-password ref="checkPass" @on-success="resetPass" />

  </div>
</template>

<script>
  import {
    getEnterpriseEmployeeList,
    jobVoList,
    getAllUserData,
    resetUserPass,
    createOrUpdateScoreRecord
  } from "@/api/index";
  import { validateMobile } from "@/libs/validate";
  import departmentChoose from "../../my-components/xboot/department-choose";
  import checkPassword from "@/views/my-components/xboot/check-password";
  import {
    forbiddenEnterpriseEmployee,
    getAllRoleList,
    removeEnterpriseEmployee,
    removeSupervisionUser
  } from "../../../api";
  export default {
    name: "user-manage",
    components: {
      departmentChoose,
      checkPassword,
    },
    data() {
      return {

        modalType: 0, // 添加或编辑标识
        modalVisible: false, // 添加或编辑显示
        modalTitle: "", // 添加或编辑标题
        jobData: [],
        height: 510,
        showUser: false,
        showType: "0",
        loading: true,
        openSearch: true,
        openTip: true,
        operationLoading: false,
        loadingExport: true,
        modalExportAll: false,
        drop: false,
        dropDownContent: "展开",
        dropDownIcon: "ios-arrow-down",
        selectCount: 0,
        selectList: [],
        dataDep: [],
        searchKey: "",
        addOrUpdateSore: {
          employeeId: "",
          ScoreDesc:"",
          score: "",
          addOrSub: "",
          scoreDetail: "",
        },
        searchForm: {
          id: "",
          username: "",
          mobile: "",
          jobId: "",
          areaId: "",
          userLevel: "",
          pageNumber: 1,
          pageSize: 10,
          sort: "createTime",
          order: "desc",
          startDate: "",
          endDate: "",
          departmentAccount: true
        },
        form: {},
        columns: [
          {
            type: "selection",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            type: "index",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            title: "用户名",
            key: "nickname",
            minWidth: 125,
            sortable: false,
            fixed: "left",
            render: (h, params) => {
              return h(
                      "a",
                      {
                        on: {
                          click: () => {
                            this.showDetail(params.row);
                          }
                        }
                      },
                      params.row.nickname
              );
            }
          },
          {
            title: "头像",
            key: "avatar",
            width: 80,
            align: "center",
            render: (h, params) => {
              return h("Avatar", {
                props: {
                  src: params.row.avatar
                }
              });
            }
          },
          {
            title: "手机",
            key: "mobile",
            minWidth: 125,
            sortable: false
          },
          {
            title: "邮箱",
            key: "email",
            minWidth: 125,
            sortable: false
          },
          {
            title: "性别",
            key: "sex",
            width: 70,
            align: "center"
          },
          {
            title: "岗位",
            key: "jobName",
            minWidth: 100,
            sortable: false,
            fixed: "left"
          },

          {
            title: "部门名称",
            key: "departmentTitle",
            minWidth: 100,
            sortable: false,
            fixed: "left"
          },

          {
            title: "区域",
            key: "areaName",
            minWidth: 100,
            sortable: true,
            fixed: "left"
          },

          {
            title: "详细地址",
            key: "street",
            minWidth: 100,
            sortable: false,
            fixed: "left"
          },

          {
            title: "类型",
            key: "type",
            align: "center",
            width: 100,
            render: (h, params) => {
              let re = "";
              if (params.row.type === 1) {
                re = "管理员";
              } else if (params.row.type === 0) {
                re = "普通用户";
              }
              return h("div", re);
            },
            filters: [
              {
                label: "普通用户",
                value: 0
              },
              {
                label: "管理员",
                value: 1
              }
            ],
            filterMultiple: false,
            filterRemote: e => {
              let v = "";
              if (e.length > 0) {
                v = e[0];
              }
              this.searchForm.type = v;
              this.searchForm.pageNumber = 1;
              this.getUserList();
            }
          },
          {
            title: "是否允许离岗",
            key: "dimission",
            align: "center",
            width: 100,
            render: (h, params) => {
              let re = "";
              if (params.row.dimission === true) {
                re = "允许";
              } else if (params.row.dimission === false) {
                re = "不允许";
              }
              return h("div", re);
            },
            filters: [
              {
                label: "不允许",
                value: true
              },
              {
                label: "允许",
                value: false
              }
            ],
            filterMultiple: false,
            filterRemote: e => {
              let v = "";
              if (e.length > 0) {
                v = e[0];
              }
              this.searchForm.type = v;
              this.searchForm.pageNumber = 1;
              this.getUserList();
            }
          },

          {
            title: "状态",
            key: "status",
            align: "center",
            width: 110,
            render: (h, params) => {
              if (params.row.status === 0) {
                return h("div", [
                  h("Badge", {
                    props: {
                      status: "success",
                      text: "正常启用"
                    }
                  })
                ]);
              } else if (params.row.status === -1) {
                return h("div", [
                  h("Badge", {
                    props: {
                      status: "error",
                      text: "禁用"
                    }
                  })
                ]);
              }
            },
            filters: [
              {
                label: "正常启用",
                value: 0
              },
              {
                label: "禁用",
                value: -1
              }
            ],
            filterMultiple: false,
            filterRemote: e => {
              let v = "";
              if (e.length > 0) {
                v = e[0];
              }
              this.searchForm.status = v;
              this.searchForm.pageNumber = 1;
              this.getUserList();
            }
          },
          {
            title: "创建时间",
            key: "createTime",
            sortable: true,
            sortType: "desc",
            width: 180
          },
          {
            title: "操作",
            key: "action",
            width: 200,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              return h("div", [

                h(
                        "Button",
                        {
                          props: {
                            type: "error",
                            size: "small"
                          },
                          on: {
                            click: () => {
                              this.setSafeScore(params.row);
                            }
                          }
                        },
                        "设置安全分"
                )
              ]);
            }
          }
        ],
        data: [],
        exportData: [],
        total: 0,
        dictSex: this.$store.state.dict.sex,
      };
    },

    methods: {
      init() {
        this.getUserList();
      },
      handleSelectDepTree(v) {
        this.form.departmentId = v;
      },
      handleSelectDep(v) {
        this.searchForm.departmentId = v;
      },
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getUserList();
        this.clearSelectAll();
      },
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.getUserList();
      },
      selectDateRange(v) {
        if (v) {
          this.searchForm.startDate = v[0];
          this.searchForm.endDate = v[1];
        }
      },
      getUserList() {
        // 多条件搜索用户列表
        this.loading = true;
        getEnterpriseEmployeeList(this.searchForm).then(res => {
          this.loading = false;
          if (res.code === 200) {
            this.data = res.result.content;
            this.total = res.result.size;
          }else {
            this.data = [];
            this.total = 0;
          }
        });
      },
      handleSearch() {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        if (this.searchForm.username === "undefined") {
          this.searchForm.username = "";
        }

        if (this.searchForm.mobile === "undefined") {
          this.searchForm.mobile = "";
        }

        if (this.searchForm.jobId === "undefined") {
          this.searchForm.jobId = "";
        }
        this.getUserList();
      },
      handleReset() {
        this.$refs.searchForm.resetFields();
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.selectDate = null;
        this.searchForm.startDate = "";
        this.searchForm.endDate = "";
        this.selectDep = [];
        this.searchForm.departmentId = "";
        // 重新加载数据
        this.getUserList();
      },
      changeSort(e) {
        this.searchForm.sort = e.key;
        this.searchForm.order = e.order;
        if (e.order === "normal") {
          this.searchForm.order = "";
        }
        this.getUserList();
      },
      getRoleList() {
        getAllRoleList().then(res => {
          if (res.success) {
            this.roleList = res.result;
          }
        });
      },
      handleSubmit() {
        this.submitLoading = true;
        createOrUpdateScoreRecord(this.addOrUpdateSore).then(res => {
          this.submitLoading = false;
          if (res.success) {
            this.$Message.success("操作成功");
            this.$emit("on-submit", true);
            this.visible = false;
            this.modalVisible = false;
          }
        });
      },

      handleDropdown(name) {
        if (name == "refresh") {
          this.getUserList();
        } else if (name == "reset") {
          if (this.selectCount <= 0) {
            this.$Message.warning("您还未选择要重置密码的用户");
            return;
          }
          this.$refs.checkPass.show();
        } else if (name == "exportData") {
          if (this.selectCount <= 0) {
            this.$Message.warning("您还未选择要导出的数据");
            return;
          }
          this.$Modal.confirm({
            title: "确认导出",
            content: "您确认要导出所选 " + this.selectCount + " 条数据?",
            onOk: () => {
              this.$refs.exportTable.exportCsv({
                filename: "用户数据"
              });
            }
          });
        } else if (name == "exportAll") {
          this.modalExportAll = true;
        } else if (name == "importData") {
          this.$Modal.info({
            title: "请获取完整版",
            content: "支付链接: http://xpay.exrick.cn/pay?xboot"
          });
        }
      },
      exportAll() {
        getAllUserData().then(res => {
          this.modalExportAll = false;
          if (res.success) {
            this.exportData = res.result;
            setTimeout(() => {
              this.$refs.exportTable.exportCsv({
                filename: "用户全部数据"
              });
            }, 1000);
          }
        });
      },
      resetPass() {
        this.$Modal.confirm({
          title: "确认重置",
          content:
                  "您确认要重置所选的 " +
                  this.selectCount +
                  " 条用户数据密码为【123456】?",
          loading: true,
          onOk: () => {
            let ids = "";
            this.selectList.forEach(function(e) {
              ids += e.id + ",";
            });
            ids = ids.substring(0, ids.length - 1);
            resetUserPass({ ids: ids }).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("操作成功");
                this.clearSelectAll();
                this.getUserList();
              }
            });
          }
        });
      },
      handleSelectAreaChoose(v) {
        this.searchForm.areaId = v;
      },
      showDetail(v) {
        // 转换null为""
        for (let attr in v) {
          if (v[attr] == null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.form = data;
        this.showType = "0";
        this.showUser = true;
      },
      add() {
        this.showType = "2";
        this.showUser = true;
      },
      edit(v) {
        // 转换null为""
        for (let attr in v) {
          if (v[attr] == null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.form = data;
        this.showType = "1";
        this.showUser = true;
      },

      setSafeScore(v) {
        this.modalTitle = "设置安全风险分";
        this.modalVisible = true;
        this.addOrUpdateSore.employeeId = v.id
      },
      getJobData() {
        jobVoList().then(res => {
          console.log(res.result);
          if (res.success) {
            this.jobData = res.result;
          }
        });
      },
      dropDown() {
        if (this.drop) {
          this.dropDownContent = "展开";
          this.dropDownIcon = "ios-arrow-down";
        } else {
          this.dropDownContent = "收起";
          this.dropDownIcon = "ios-arrow-up";
        }
        this.drop = !this.drop;
      },
      showSelect(e) {
        this.exportData = e;
        this.selectList = e;
        this.selectCount = e.length;
      },
      clearSelectAll() {
        this.$refs.table.selectAll(false);
      },
    },
    mounted() {
      // 计算高度
      this.height = Number(document.documentElement.clientHeight - 230);
      this.init();
      this.getJobData();
    }
  };
</script>